<%var jstpl = {%>
<script src="${basepath}/plugin/hhFolder/hhFolder.min.js?a=1"></script>

<script src="${basepath}/plugin/ueditor-min-1.4.3/ueditor.config.js"></script>
<script src="${basepath}/plugin/ueditor-min-1.4.3/ueditor.all.min.js?v=0"> </script>


<script>
layui.code({
	  encode: true
	  ,height:300
	});
$(function(){
	var ue = UE.getEditor('desc');
})
</script>

<script>

$(document).ready(function(){
/* 	gx.loadFile("/static/plugin/qn_jssdk/qiniu.dev.js","js");
	gx.loadFile("/static/plugin/qn_jssdk/plupload/plupload.full.min.js","js"); */
	// 上传多个文件
	$(".btn-uploadx").click(function(){
		// 上传单个文件
			elm = $(this);
			hhFolder({
				id: "SinglePanel",
				title: "文件夹",
				shade: 0.4,
				anim: "slideUp",
				upload: true,
				max: 2,
				thumb_w: 400,
				thumb_h: 200,
				prefix: "hhFolder/",
				success: function(files){
					alert(JSON.stringify(files))
				}
		});
	});
	
	$(".btn-qrcode").click(function(){
		layer.prompt({title: '请输入二维码中存储的内容，并确认', formType: 2}, function(text, index){
		    layer.close(index);
		    //layer.msg('演示完毕！您最后写下了：'+text);
		    Ajax("/system/demo/scQrcode?text="+text,null,function(d){
		    	layer.open({
					  type: 1,
					  title:'hi 我是二维码~',
					  skin: 'layui-layer-rim', //加上边框
					  area: ['305px', '340px'], //宽高
					  anim: 4,
					  content: '<img alt="" src="'+d.data+'">'
					});
		    })
		});
	})
	
	$(".btn-lunch-modal").click(function(){
		$('#compose-mail').modal('show');
	})
	
	
})
</script>
<%};%>
<%var csstpl = {%>

<%};%>
<%layout("../layout/_layout_layui.html",{title:'Demo演示',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row">
    <div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">文件管理</li>
    <li>百度编辑器</li>
    <li>二维码生成与上传</li>
    <li>Excel导入导出</li>
    <li>BS模态框</li>
    <li><﹟role>< /﹟role>标签权限验证</li>
  </ul>
  <div class="layui-tab-content" style="height:auto;">
    <div  class="layui-tab-item layui-show">
    <div class="layui-col-md12">
  <pre class="layui-code">
<script src="${basepath}/plugin/hhFolder/hhFolder.min.js?a=1"></script>
$(document).ready(function(){
	
	// 删除上传文件
	$(".pic").on("click","li b",function(){
		$(this).parent().remove();
		$(".btn_add").show();
	});
	
	// 上传多个文件
	$(".file1").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			max: 10-$(".file1 .added").length,
			thumb_w: 250,
			thumb_h: 250,
			title: "文件管理",
			prefix: "hhFolder/",
//			qiniu_url: "/pub/php/qn_phpsdk/uptoken.php?bucket=temp2",
//			token_url: "/pub/php/qn_phpsdk/uptoken.php?bucket=temp",
//			cate_url: "/pub/php/qn_phpsdk/uptoken.php?bucket=temp",
//			file_url: "/pub/php/qn_phpsdk/uptoken.php?bucket=temp",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
				if( $(".file1 .added").length==10 ) elm.hide();
			}
		});
	});
	
	//$(".file1 .btn_add").trigger("click");
	
	// 上传单个文件
	$(".file2").on("click","img",function(){
		elm = $(this);
		hhFolder({
			id: "SinglePanel",
			title: "立树大人的文件夹",
			shade: 0.4,
			anim: "slideUp",
			upload: true,
			max: 1,
			thumb_w: 400,
			thumb_h: 200,
			prefix: "hhFolder/",
			success: function(file){
				elm.attr("src",file.thumb);
			}
		});
	});
	
	// 限制文件大小
	$(".file22").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "SizePanel",
			title: "小小小小小文件",
			prefix: "hhFolder/",
			filter: "*",
			//max_size: "50kb",
			max_size: "1mb",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 仅上传图片文件
	$(".file3").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "ImagePanel",
			title: "图片库",
			prefix: "hhFolder/",
			filter: "image",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 仅上传文档文件
	$(".file4").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "OfficePanel",
			title: "文档库",
			prefix: "hhFolder/",
			filter: "office",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 仅上传音频文件
	$(".file5").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "AudioPanel",
			title: "音乐库",
			prefix: "hhFolder/",
			filter: "audio",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 仅上传视频文件
	$(".file6").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "VideoPanel",
			title: "视频库",
			prefix: "hhFolder/video/",
			filter: "video",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 仅上传压缩包文件
	$(".file7").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "PackPanel",
			title: "不能见人的压缩包",
			prefix: "hhFolder/pack/",
			filter: "pack",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
	// 混合类型
	$(".file8").on("click",".btn_add",function(){
		elm = $(this);
		hhFolder({
			id: "MixPanel",
			title: "不能见人的压缩包",
			prefix: "hhFolder/pack/",
			filter: "image,office,rar",
			success: function(files){
				tpl = $("#tpl_thumb").html();
				laytpl(tpl).render(files,function(html){
					elm.before(html);
					$(".lazy").lazyload();
				});
			}
		});
	});
	
});
   </pre>
   
   <p><a target="_blank" href="http://plugin.houheaven.com/hhFolder/script/func.js">参考JS http://plugin.houheaven.com/hhFolder/script/func.js</a></p>
   <button class="layui-btn layui-primary btn-uploadx">点击我上传两个文件</button>
   </div>
    </div>
    <div class="layui-tab-item">
    <div  class="layui-col-md12">
  	<pre class="layui-code">
  		//需要引入的JS
	  	<script src="${basepath}/plugin/ueditor-min-1.4.3/ueditor.config.js"></script>
		<script src="${basepath}/plugin/ueditor-min-1.4.3/ueditor.all.min.js?v=0"> </script>
		//编写调用的JS代码
		$(function(){
			var ue = UE.getEditor('desc');
		})
		//使用的HTML
		<textarea rows="" id="desc" cols=""></textarea>
  	</pre>
  	<textarea rows="" id="desc" cols="3"></textarea>
   </div>
    
    </div>
    
    <div class="layui-tab-item">
    <div  class="layui-col-md12" >
  	<pre class="layui-code">
  		//配置pom.xml
  		<!--  生成二维码  -->
	    <dependency>
           <groupId>com.google.zxing</groupId>
           <artifactId>core</artifactId>
           <version>3.0.0</version>
	    </dependency>
	
	    <dependency>
           <groupId>com.google.zxing</groupId>
           <artifactId>javase</artifactId>
           <version>3.0.0</version>
	    </dependency>
	  	//编写QrCodeKit.java类  或者复制现有的。。。
	  	package com.gexin.common;

import java.io.File;
import java.nio.file.FileSystems;
import java.nio.file.Path;
import java.util.Hashtable;
import com.gexin.common.utils.IdGenerateUtils;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.jfinal.kit.PathKit;

/**
 * 二维码生成工具类
 * @author 肖得明
 */
public class QrCodeKit {
	private static int width = 300; // 二维码图片宽度
	private static  int height = 300; // 二维码图片高度
	private static  String format = "gif";// 二维码的图片格式
	private static  String File_Path = PathKit.getWebRootPath()+File.separator+"code";// 二维码的图片格式
	static{
		File f =new File(File_Path);
		if(!f.exists()){
			f.mkdir();
		}
	}
	/**
	 * 生成二维码
	 * @param text  文本
	 * @return  文件名
	 */
	public static String getQrCode(String text){
		try {
			Hashtable<EncodeHintType, Object> hints = new Hashtable<EncodeHintType, Object>();
			hints.put(EncodeHintType.CHARACTER_SET, "utf-8");	// 内容所使用字符集编码
			hints.put(EncodeHintType.MARGIN, 1);
			BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, width, height, hints);
			// 生成二维码
			String file_id= IdGenerateUtils.getId()+".gif";
	        Path path = FileSystems.getDefault().getPath(File_Path, file_id);  
	        MatrixToImageWriter.writeToPath(bitMatrix, format, path);// 输出图像  
	        return File_Path+File.separator+file_id;
		} catch (Exception e) {
			return null;
		}

	}
	public static void main(String[] args) {
		String file_name = getQrCode("test");
		System.err.println(file_name);
	}
}
	  	
		//编写调用的java代码   这里以main方法调用为例
		public static void main(String[] args) {
		    String file_name = getQrCode("test");//二维码中存test字符串
		    System.err.println(file_name);//二维码所在的本地路径
}
//二维码上传到七牛的java代码   参数解释：info:二维码里存储的文本  可以是id或者url等      file_name:二维码上传到七牛的文件名
QiNiuUtil.upload(QrCodeKit.getQrCode(info), file_name + ".gif"));
  	</pre>
  	<button class="layui-btn layui-primary btn-qrcode">点击我生成二维码</button>
   </div>
    </div>
    <div class="layui-tab-item">
    <div class="layui-col-md12">
  	<pre class="layui-code">
  		//采用XXL-EXCEL开源工具实现Excel导入和导出
		//编写调用的Java代码    以日志导出为例
		ExcelUtils.exportDocument(getResponse(), getRequest(), "登录日志", list1);
  	</pre>
  	<p><a target="_blank" href="http://www.xuxueli.com/xxl-excel/#/?id=xxl-excel">参考API  http://www.xuxueli.com/xxl-excel/#/?id=xxl-excel</a></p>
   </div>
    </div>
    <div class="layui-tab-item ">
    <div  class="layui-col-md12">
  	<pre class="layui-code">
  		//需要引入的CSS和JS
	  	<link rel="stylesheet" href="${basepath}/gexinadmin/common.css" media="all">
		<script src="${basepath}/gexinadmin/common.js"></script>
		
		//编写调用的JS代码
		//1.打开模态框
		$('#compose-mail').modal('show');
		//2.关闭模态框
		$('#compose-mail').modal('hide');
		
		//使用的HTML
		----------------------------------------------------------------------------------------------------------------------------
		<div class="modal fade" id="compose-mail" tabindex="-1" role="dialog"
			aria-hidden="true">
			<form id="add_saveform" class="layui-form form-horizontal ">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">
								标题
							</h4>
						</div>
						<!-- 弹出框内容  -->
						<div class="modal-body">
							<div class="layui-row layui-col-space15">
								<div class="layui-form-item">
									<label class="layui-form-label">ID</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" lay-verify="required"
											placeholder="请输入ID" name="dict.busi_name">		
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">NAME</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" lay-verify="required"
											　placeholder="请输入NAME" name="dict.busi_value" >
									</div>
								</div>
								
							</div>
							
						</div>
						
						<div class="modal-footer">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="layui-btn" lay-submit
										lay-filter="formDemo">提交</button>
									<button type="button" data-dismiss="modal"
										class="layui-btn layui-btn-primary">关闭</button>
								</div>
							</div>
						</div>

					</div>
				</div>
			</form>
		</div>
		----------------------------------------------------------------------------------------------------------------------------
		
  	</pre>
  	<p><a target="_blank" href="https://v3.bootcss.com/javascript/#js-overview">更多请参考API： https://v3.bootcss.com/javascript/#js-overview</a></p>
   <button class="layui-btn layui-primary btn-lunch-modal">运行demo</button>
   <div class="modal fade" id="compose-mail" tabindex="-1" role="dialog"
			aria-hidden="true">
			<form id="add_saveform" class="layui-form form-horizontal ">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">
								标题
							</h4>
						</div>
						<!-- 弹出框内容  -->
						<div class="modal-body">
							<div class="layui-row layui-col-space15">
								<div class="layui-form-item">
									<label class="layui-form-label">ID</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" lay-verify="required"
											placeholder="请输入ID" name="dict.busi_name">		
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">NAME</label>
									<div class="layui-input-block">
										<input class="layui-input" type="text" lay-verify="required"
											　placeholder="请输入NAME" name="dict.busi_value" >
									</div>
								</div>
								
							</div>
							
						</div>
						
						<div class="modal-footer">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="button" class="layui-btn" lay-submit
										lay-filter="formDemo">提交</button>
									<button type="button" data-dismiss="modal"
										class="layui-btn layui-btn-primary">关闭</button>
								</div>
							</div>
						</div>

					</div>
				</div>
			</form>
		</div>
   
   </div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-col-md12">
  	<pre class="layui-code">
  	<﹟role type="id,code,url,user_id"  value="xxx"> <p>你有权限操作</p>< /﹟role>
  	
  	//type  只能支持一种选项：  id就是权限id，code就是权限组代码，url就是资源地址
	//value 根据上面的 type 来对应填写 ，多个值可以用逗号隔开    
	//当前用户登录的id为1的时候， 即超级管理员 ，默认通过权限校验
	
	//用法示例 1.当前登录用户权限id为9时  显示该按钮
	<﹟role  type="id"  value="9" >				
				<a href="/system/role/user/add_edit" type="submit" class="layui-btn layui-btn-normal">
					<i class="layui-icon">&#xe608;</i> 添加用户
				</a>
	< /﹟role>
	
	//用法示例 2.当前登录用户权限代码为A时  显示该按钮
	<﹟role  type="code"  value="A" >				
				<a href="/system/role/user/add_edit" type="submit" class="layui-btn layui-btn-normal">
					<i class="layui-icon">&#xe608;</i> 添加用户
				</a>
	< /﹟role>
	
	//用法示例 3.当前登录用户有勾选该url资源地址时  显示该按钮
	<﹟role  type="url"  value="/system/role/user/add_edit" >				
				<a href="/system/role/user/add_edit" type="submit" class="layui-btn layui-btn-normal">
					<i class="layui-icon">&#xe608;</i> 添加用户
				</a>
	< /﹟role>
  	</pre>
  	<p style="color: red;">注意：因为role标签与demo冲突，demo中role标签写法#号不是英文的#号，实际使用中请在role标签对的前面加上英文的#号！</p>
  	<p style="color: red;">后台校验类：com.gexin.model.system.RoleCheck</p>
   </div>
    
    </div>
    
    <div style="clear:both;"></div><!-- 加入不浮动元素 -->
  </div>
</div>
</div>
<%}%>